<template>
  <el-dialog
    :width="data.width"
    title="数据选择"
    v-model="data.visable"
    :align-center="true"
    style="height: 600px; padding: 20px"
  >
    <el-container>
      <el-header>
        <!-- 查询界面 -->
        <div class="right-panel">
          <div class="right-panel-search">
            <el-input
              v-model="data.search.keyWord"
              placeholder="请输入关键词查询"
              clearable
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </div>
        </div>
      </el-header>
      <el-main class="nopadding">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="selectionChange"
          :height="450"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" width="180" />
          <el-table-column
            v-for="item in properies"
            :key="item.name"
            :prop="item.name"
            :label="item.label"
          ></el-table-column>
          <!-- <el-table-column prop="tableName" label="表名" width="180" />
          <el-table-column prop="tableComment" label="说明" /> -->
        </el-table>
      </el-main>
    </el-container>
    <div class="left-panel">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import mitt from '@/utils/bus';
const bus: any = mitt;
//父组件defineprops
//子组件:传值
const properies = [
  {
    name: 'tableName',
    label: '表名',
  },
  {
    name: 'tableComment',
    label: '说明',
  },
];
const cancel = () => {
  data.visable = false;
};
const confirm = () => {
  data.visable = false;
  bus.emit('selectedTable', data.multipleSelection);
};

const tableData = ref([]);
const data = reactive({
  title: '',
  width: 800,
  visable: false,
  search: {
    keyWord: '',
  },
  multipleSelection: [],
});
const selectionChange = (selectionItem: any) => {
  data.multipleSelection = selectionItem;
};
const props = defineProps({
  api: {},
  title: { type: String, default: '' },
});
const search = async () => {
  var res = await (props.api as any).get();
  if (res != null) {
    tableData.value = res.data;
  }
};
const open = () => {
  data.visable = true;
};
const handleSelectionChange = (val: any) => {
  data.multipleSelection = val;
};
defineExpose({
  open,
});
onMounted(async () => {
  await search();
});
</script>
<style lang="scss" scoped>
.left-panel {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
</style>
